<!DOCTYPE html>
<html>
{{> head title="服务列表"}}
<link rel="stylesheet" href="/static/css/services.css">
{{> use_vue}}
<body>
    {{> navbar}}
    <div class="container-fluid" id="app">
        <div class="page-header">
            <div class="header-actions">
                <div class="search-box">
                    <div class="input-group">
                        <input 
                            type="text" 
                            class="form-control"
                            id="service-search"
                            placeholder="搜索服务..." 
                            v-model="searchQuery"
                        >
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="header-buttons">
                    <button 
                        class="btn btn-primary" 
                        @click="refreshAllServices"
                    >
                        刷新所有
                    </button>
                    <button 
                        class="btn btn-primary" 
                        id="add-service-btn"
                        @click="showAddModal"
                    >
                        添加服务
                    </button>
                </div>
            </div>
        </div>

        <div class="service-and-category-container">
            <div class="category-container col-md-2">
                <div 
                    class="category-item" 
                    v-for="category in getAllCategories()" 
                    :key="category"
                    @click="setSelectedCategory(category)"
                >
                    <div class="category-box" :class="{ active: selectedCategory === category }">
                        <span class="badge" :class="getCategoryClass(category)">[[ category ]]</span>
                    </div>
                </div>
            </div>
            <div class="services-container col-md-6">
                <div class="accordion" id="services-accordion">
                <div v-for="service in filteredServices" :key="service.id" class="accordion-item">
                    <div class="accordion-header" @click="toggleService(service)">
                        <div class="service-info">
                            <span>[[ getServiceNameDisplay(service) ]]</span>
                            <div class="service-info-bottom">
                                <span class="badge" :class="getCategoryClass(service.category)">
                                    [[ service.category ]]
                                </span>
                                <small style="margin-left: 10px;">[[ service.address ]]</small>
                            </div>
                        </div>
                        <div class="service-status">
                            <span v-if="service.status_temp === 'Loading'" class="service-status-span">
                                <img src="/static/images/loading.png" class="refresh-icon" alt="加载中">
                            </span>
                            <span v-else-if="service.status === 'CannotReach'">
                                <button class="btn btn-primary" id="refresh-btn" @click.stop="refreshService(service)">
                                    <img src="/static/images/refresh.png" class="refresh-icon" alt="刷新">
                                </button>
                            </span>
                            <span v-else class="service-status-span">
                                <img src="/static/images/check.png" class="refresh-icon" alt="刷新">
                            </span>
                            <span class="badge" :class="getStatusClass(service.status)">
                                [[ service.status ]]
                            </span>
                        </div>
                    </div>
                    <div class="accordion-content" :class="{ active: service.isExpanded }">
                        <div class="card-body">
                            <p class="card-text text-muted">
                                <i class="fas fa-info-circle"></i> [[ service.description ]]
                            </p>
                            <div class="service-actions">
                                <button class="btn btn-outline-success btn-sm" @click="refreshService(service)">
                                    <i class="fas fa-sync-alt"></i> 刷新
                                </button>
                                <button class="btn btn-outline-danger btn-sm" @click="deleteService(service)">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                            <div class="service-tasks mt-3">
                                <div v-for="(task, index) in service.tasks" :key="index" class="task-item">
                                    <div class="task-info">
                                        <span class="task-name">[[ index + 1 ]]. [[ task.signature ]]</span>
                                    </div>
                                    <div class="task-actions">
                                        <input 
                                            type="file" 
                                            :id="'file-input-' + service.id + '-' + index"
                                            style="display: none"
                                            @change="handleFileSelect($event, service, task)"
                                        >
                                        <span v-if="typeof task !== 'string' && task.selectedFile" class="selected-file">
                                            <i class="fas fa-file"></i> [[ task.selectedFile ]]
                                        </span>
                                        <button class="btn btn-outline-secondary btn-sm" @click="selectFile(service.id, index)">
                                            <i class="fas fa-file"></i> 选择文件
                                        </button>
                                        <button 
                                            class="btn btn-outline-primary btn-sm" 
                                            @click="startTask(service, task)"
                                        >
                                            <i class="fas fa-play"></i> 启动
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加服务的模态窗口 -->
        <div class="modal fade" id="addServiceModal" tabindex="-1" :class="{ show: showModal }" v-if="showModal">
            <div class="modal-content" :style="{ top: top + 'px', left: left + 'px' }">
                <div class="modal-header" @mousedown="startDrag">
                    <h5 class="modal-title">添加服务</h5>
                    <button type="button" class="close" @click="closeModal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="submitService">
                        <div class="form-group row mb-3">
                            <div class="col-sm-3">
                                <label class="col-form-label">服务类型</label>
                            </div>
                            <div class="col-sm-9">
                                <select 
                                    class="form-select" 
                                    v-model="newService.protocol"
                                >
                                    <option value="http">HTTP</option>
                                    <option value="zmq">ZeroMQ</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col-sm-3">
                                <label class="col-form-label">地址（必填）</label>
                            </div>
                            <div class="col-sm-9">
                                <div class="address-input-group">
                                    <label class="protocol-label">
                                        [[ newService.protocol ]]://
                                    </label>
                                    <input 
                                        type="text" 
                                        class="form-control address-input" 
                                        v-model="newService.address"
                                        :placeholder="getAddressPlaceholder()"
                                        required
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-sm-3 col-form-label">名称（可选）</label>
                            <div class="col-sm-9">
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    v-model="newService.given_name"
                                    placeholder="自定义名称"
                                >
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-sm-3 col-form-label">分类（可选）</label>
                            <div class="col-sm-9">
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    v-model="newService.category"
                                    placeholder="自定义类别名称"
                                >
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
                            <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                                [[ isSubmitting ? '添加中...' : '添加' ]]
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 模态窗口背景遮罩 -->
        <div class="modal-backdrop fade show" v-if="showModal"></div>
    </div>

    <script src="/static/js/services.js"></script>
    {{> footer}}
</body>
</html>

